<template>
	<view class="panel-root flex justify-start align-center">
		<view @tap="clickMask" class="mask-board">
		</view>
		<view class="bg-white padding-sm solid-bottom" style="width: 100%;flex-direction: column;">
			<view class="flex justify-end align-center" style="width: 100%;">
				<view class="flex justify-center align-center" style="width: 95%;">
					<text class="text-bold text-lg">就要打赏他</text>
				</view>
				<text @tap="clickMask" class="cuIcon-close text-gray" style="width: 5%;"></text>
			</view>
		</view>
		<view class="flex justify-center bg-white align-start padding-top padding-bottom" style="flex-direction: column;">
			<view class="bg-white flex flex-wrap radius-top-left radius-top-right padding-bottom" style="width: 100%;">
				<view v-for="(item,index) in menuList" :key="index">
					<view @tap="chooseScore(item)" class="flex justify-start align-center padding-left padding-right"
						style="flex-direction: column;">
						<image src="../static/images/setting/coin_color.png" style="width: 55px;height: 55px;">
						</image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<text class="text-bold text-grey padding-left padding-bottom">我的山竹:{{myScore}}个</text>
		</view>
	</view>
</template>

<script>
	import uniTransition from '@/components/uni-transition/components/uni-transition/uni-transition.vue'
	import {
		isLogin,
		getUserInfo
	}  from '@/api/auth.js'
	export default {
		components: {
			uniTransition
		},
		props: {
			index: {
				type: Number,
				default: -1
			},
			userInfo:{
				type:Object,
				default:{}
			}
		},
		name: "ScorePay",
		data() {
			return {
				myScore:0,
				show: false,
				modeClass: 'fade',
				menuList: [{
						name: '1个山竹',
						value: 1
					},
					{
						name: '3个山竹',
						value: 3
					},
					{
						name: '5个山竹',
						value: 5
					},
					{
						name: '10个山竹',
						value: 10
					},
					{
						name: '20个山竹',
						value: 20
					}
				]
			};
		},
		mounted() {
			if(isLogin() == true) {
				this.myScore = getUserInfo().score
			}
			let that = this 
			uni.$on('UserInfoBaseRefresh',function(){
				that.myScore = getUserInfo().score
			})
			uni.$on('UserLoginSuccess',function(){
				that.myScore = getUserInfo().score
			})
		},
		methods: {
			chooseScore(item) 
			{
				this.$emit('chooseScore',[item.value,this.index])
			},
			clickMask() {
				this.hiddenTabbar()
				this.$emit('hidden')
			},
			switchStatus() {
				if (this.show) {
					this.hiddenTabbar()
				} else {
					this.showTabbar()
				}
			},
			showTabbar() {
				if (this.show) {
					return
				}
				this.show = true
				this.modeClass = ['fade', 'slide-bottom']
				this.$emit('onShow')
			},
			hiddenTabbar() {
				if (!this.show) {
					return
				}
				this.show = false
				this.modeClass = ['fade', 'slide-bottom']
				this.$emit('onHidden')
			}
		},
	}
</script>

<style lang="scss">
	.mask-board {
		position: relative;
		height: 100%;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.panel-root {
		position: absolute;
		flex-direction: column;
		top: 0%;
		height: 100%;
		width: 100%;
	}
</style>
